//生成环境

const path = require("path");
//在webpack中的loader其实就是一个个的函数（可以自己制作）

//webpack中的插件就是一个个构造函数 ，使用的时候就是实例化
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽取css 插件
const HtmlWebPackPlugin = require("html-webpack-plugin"); //处理html模板文件

//创建一个html模板插入插件实例
const htmlWebpackPlugin = new HtmlWebPackPlugin({
    title: "webpack配置演示案例", //设置网页标题属性
    template: "../index.html", //设置html模板文件地址
    filename: "index.html", //输出的文件名
    minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联css
    },
    inject: "body", //插入（打包出来的js）文件的位置
    favicon: "favicon.ico", //收藏图标
    //是否压缩html里的js（使用uglify-js进行的压缩）
    minifyJS: true,
    //是否压缩html里的css（使用clean-css进行的压缩） 默认值false；
    minifyCSS: true,
    //是否移除属性的引号 默认false
    removeAttributeQuotes: true,
});

//导入webpack中 热模块替换插件
const webpack = require("webpack");

module.exports = {
    target: "web", //配置项目的构建目标：web端 ， node-webkit端还是其他的桌面端应用
    mode: "development", //设置模式production 会自动压缩 ，如果是开发环境development 就不会
    context: path.resolve(process.cwd(), 'src'), //配置基本目录
    entry: "./main.js", //入口
    output: { //输出配置
        path: path.resolve(process.cwd(), 'dist'),
        filename: "js/app.[hash].js"
    },
    devtool: "source-map",
    module: { //配置各个模块的处理方式
        rules: [{
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: ['style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true, //生成map映射
                        }
                    },
                ],
            },
            {
                test: /\.less$/,
                // loader:"style-loader!css-loader!less-loader",//1.字符串方式（串联）
                // loader:['style-loader','css-loader','less-loader'],//2.数组形式
                loader: [ //3.对象的形式 ，方便传入参数
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true, //生成map映射
                        }
                    },
                    {
                        loader: "postcss-loader",
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true //生成map映射
                        }
                    }
                ],
                exclude: /node_modules/, //针对于node_modules 模块下的文件不进行处理
                include: /src/, //指定只处理src 目录下的less
            },
            { //针对于css样式中的字体文件处理（不需要额外的处理，只要将引入的字体文件拷贝到dist目录即可）
                test: /\.(ttf|woff|svg|woff2|eot)$/,
                loader: {
                    loader: "url-loader",
                    options: {
                        limit: 20 * 1024, //设定当问及小于指定的大小时，转换成base64编码 - 20kb
                        outputPath: "fonts", //指定输出的目录
                    }
                }
            }
        ]
    },
    plugins: [ //插件（负责处理loader能力之外的工作）
        htmlWebpackPlugin, //生成html模板文件的插件
        new webpack.HotModuleReplacementPlugin(), //热替换模块
    ],
    resolve: { //用来配置一些webpack指定模块内容的解析方式
        alias: { //别名
            "vue$": "vue/dist/vue.min.js",
            "@": path.resolve(__dirname, "../src"),
            "@less": path.resolve(__dirname, '..', 'src', 'assets', 'less')
        }
    },
    devServer: { //配置本地开发测试web服务环境 - 会打包生成项目文件，但是不会存储在硬盘目录 ，会存储在内存中
        contentBase: path.resolve(__dirname, "../dist"), //(绝对路径)搭建web站点的根目录 ，一般会把dist 作为根目录
        port: 3000, //启动的服务端口
        compress: true, //开启本地http的gzip压缩
        headers: { //配置本地http服务的响应包头
            token: 132132231
        },
        inline: true, //false 时就是将内容内嵌到iframe中
        open: true, //启动后自动打开浏览器窗口
        noInfo: true, //不显示打包的具体的过程 ，会显示报错和重要警告
        host: "127.0.0.1", //配置一个对外访问的主机地址 ， 默认只能当前主机访问（127.0.0.1 / localhost）
        // hot: true,//开启模块热替换（针对于发送改变的内容部分局部更新）， 没有开启之前就是内容变化浏览器直接窗口刷新
        // hotOnly: true,//只允许热更新时更新页面， 如果项目构建失败了，不采用窗口刷新来达到刷新的目的
        // https:true,//开启https 协议访问 （需要配ssl证书）
        proxy: { //配置开发环境下的 请求代理（可以解决开发环境的跨域问题 ，生产环境无效）
            "/api": { //在项目的请求地址 ，以/api 开头的地址 ，接收以下代理配置操作
                target: "http://lby.link", //代理指向的目标服务器地址
                pathRewrite: { //转发路径重写
                    "/api": "/api"
                },
                secure: false, //运行在https协议上
                changeOrigin: true, //是否跨域
            }
        }
    }
}